/*
 * @Description: 代码定义表格组件
 * @Author: Rfan
 * @Date: 2022-01-07 15:20:55
 * @LastEditTime: 2022-03-08 15:51:02
 */

import { Tabs } from 'antd';
import classNames from 'classnames/bind';
import { useCodeDefContext } from '../contexts/CodeDefContext';
import CodePane from './CodePane';

import styles from '../styles/list.module.scss';

const cx = classNames.bind(styles);

const { TabPane } = Tabs;

const List = () => {
  const { list } = useCodeDefContext();

  return (
    <div className={cx('fond-container')}>
      <Tabs tabPosition="left" tabBarStyle={{ width: 160 }}>
        {list.map((item: any) => (
          <TabPane tab={item.name} key={item.id}>
            <CodePane title={item.name} data={item} />
          </TabPane>
        ))}
      </Tabs>
    </div>
  );
};

export default List;
